<!-- 绿色通道 - 患者列表 - 医疗记录 - 主诉与病史 界面 -->
<template>
  <div id="box">
    <el-row :gutter="24">
      <el-col :offset="22" :span="2">
        <el-button type="primary" @click="addHistory">保存</el-button>
      </el-col>
    </el-row>
    <div class="outer_layer">
      <el-row class="" :gutter="24">
        <el-col :span="24">
          <span class="required-field">病情现况</span>
        </el-col>
        <div style="margin-left: 1%">
          <el-col :span="24">
            <span>病情评估</span>
          </el-col>
          <el-col :span="24">
            <el-radio-group v-model="assess">
              <el-radio v-for="(item, index) in assess_value" :label="item" :key="index"
                @click.native="changeAccess($event)" />
            </el-radio-group>
          </el-col>
          <!-- <el-col :span="24">
            <span>病情症状</span>
          </el-col> -->
          <el-col :span="24">
            <el-checkbox-group v-model="symptoms">
              <el-checkbox v-for="(item, index) in symptomsList" :key="index" :label="item" />
            </el-checkbox-group>
          </el-col>
        </div>

      </el-row>
      <el-row :gutter="24">

      </el-row>
      <el-row :gutter="24">
        <el-col :span="24">
          <span>主诉症状</span>
        </el-col>
        <el-col :span="24">
          <el-input v-model="tellSymptom" size="small" style="width: 80%;" placeholder="" />
        </el-col>
        <el-col :span="24">
          <el-radio-group v-model="tellSymptoms" @change="addtellSymptoms(tellSymptoms)">
            <el-radio v-for="(item, index) in tellSymptomsList" :key="index" :label="item" />
          </el-radio-group>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="24">
          <span>诱发因素</span>
        </el-col>
        <el-col :span="24">
          <el-checkbox-group v-model="induce">
            <el-checkbox v-for="(item, index) in induceList" :key="index" :label="item" />
          </el-checkbox-group>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="24">
          <span>发生部位</span>
        </el-col>
        <el-col :span="24">
          <el-checkbox-group v-model="happen">
            <el-checkbox v-for="(item, index) in happenList" :key="index" :label="item" />
          </el-checkbox-group>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="24">
          <span>放射部位</span>
        </el-col>
        <el-col :span="24">
          <el-checkbox-group v-model="radiation">
            <el-checkbox v-for="(item, index) in radiationList" :key="index" :label="item" />
          </el-checkbox-group>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="24">
          <span>胸痛性质</span>
        </el-col>
        <el-col :span="24">
          <el-checkbox-group v-model="nature">
            <el-checkbox v-for="(item, index) in natureList" :key="index" :label="item" />
          </el-checkbox-group>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="24">
          <span>发作程度</span>
        </el-col>
        <el-col :span="24">
          <el-radio-group v-model="seiZure">
            <el-radio label="隐痛（轻度）" />
            <el-radio label="钝痛（中度）" />
            <el-radio label="剧痛（重度）" />
          </el-radio-group>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="24">
          <span>持续时间</span>
        </el-col>
        <el-col :span="24">
          <el-radio-group v-model="continued">
            <el-radio label="数秒" />
            <el-radio label="≤20分钟" />
            <el-radio label="20分钟-1h" />
            <el-radio label="数小时" />
            <el-radio label="数天" />
            <el-radio label="其他" />
          </el-radio-group>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="24">
          <span>频率</span>
        </el-col>
        <el-col :span="24">
          <el-radio-group v-model="frequency">
            <el-radio label="偶发" />
            <el-radio label="阵发" />
            <el-radio label="持续" />
          </el-radio-group>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="24">
          <span>伴随症状</span>
        </el-col>
        <el-col :span="24">
          <el-checkbox-group v-model="accompany">
            <el-checkbox v-for="(item, index) in accompanyList" :key="index" :label="item" />
          </el-checkbox-group>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="24">
          <span>缓解方式</span>
        </el-col>
        <el-col :span="24">
          <el-checkbox-group v-model="relieve">
            <el-checkbox v-for="(item, index) in relieveList" :key="index" :label="item" />
          </el-checkbox-group>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="24">
          <span>既往病史</span>
        </el-col>
        <el-col :span="24">
          <el-checkbox-group v-model="past">
            <el-checkbox v-for="(item, index) in pastList" :key="index" :label="item" />
          </el-checkbox-group>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="24">
          <span>心血管病家族史</span>
        </el-col>
        <el-col :span="24">
          <el-radio-group v-model="family">
            <el-radio label="是" />
            <el-radio label="否" />
          </el-radio-group>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="24">
          <span>过敏史</span>
        </el-col>
        <el-col :span="24">
          <el-checkbox-group v-model="allergy">
            <el-checkbox v-for="(item, index) in allergyList" :key="index" :label="item" />
          </el-checkbox-group>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="24">
          <span>入院前用药史（发病前六个月内，持续时间2周以上）</span>
        </el-col>
        <el-col :span="4">
          <span>抗血小板药</span>
          <div>
            <el-radio-group v-model="Antiplatelet">
              <el-radio label="是" />
              <el-radio label="否" />
              <el-radio label="不详" />
            </el-radio-group>
          </div>
        </el-col>
        <el-col :span="4">
          <span>抗凝药</span>
          <div>
            <el-radio-group v-model="Anticoagulation">
              <el-radio label="是" />
              <el-radio label="否" />
              <el-radio label="不详" />
            </el-radio-group>
          </div>
        </el-col>
        <el-col :span="4">
          <span>降压药</span>
          <div>
            <el-radio-group v-model="stepDown">
              <el-radio label="是" />
              <el-radio label="否" />
              <el-radio label="不详" />
            </el-radio-group>
          </div>
        </el-col>
        <el-col :span="4">
          <span>调解血脂药</span>
          <div>
            <el-radio-group v-model="Regulating">
              <el-radio label="是" />
              <el-radio label="否" />
              <el-radio label="不详" />
            </el-radio-group>
          </div>
        </el-col>
        <el-col :span="4">
          <span>降糖药</span>
          <div>
            <el-radio-group v-model="Hypoglycemic">
              <el-radio label="是" />
              <el-radio label="否" />
              <el-radio label="不详" />
            </el-radio-group>
          </div>
        </el-col>
        <el-col :span="24" />
      </el-row>
    </div>
  </div>
</template>

<script>
import {
  getHistory,
  addHistoryPost
} from '@/api/green-channel/medicalHistory.js'

export default {
  // 由主页面(父组件) 接收来的, 选择项的数据
  props: ['checkrowdata'], // 由主页面(父组件) 接收来的, 选择项的数据
  data() {
    return {
      // 主诉与病史
      assess: '', // 病情评估
      assess_value: ['持续性胸闷/胸痛', '间歇性胸闷/胸痛', '症状已缓解'],
      symptoms: [], // 病情症状
      symptomsList: ['呼吸困难', '腹痛', '齿痛', '肩背痛', '合并出血', '合并心衰', '合并恶性心律失常',
        '不明原因的昏厥', '自汗、大汗淋漓', '心慌心悸', '烦躁不安', '颈前部束缚感', '乏力', '气喘', '其他'
      ], // 病情症状数据
      tellSymptom: '',
      tellSymptoms: '', // 主诉症状
      tellSymptomsList: ['胸痛', '胸闷', '恶心', '心悸', '呕吐', '冷汗', '呼吸困难', '齿痛', '肩背痛', '发绀', '水肿', '头痛',
        '眩晕', '晕厥', '抽搐', '惊厥', '意识障碍', '麻木', '震颤', '偏瘫', '发热', '寒战', '咽痛', '咳嗽', '咳痰', '咳血', '腹痛',
        '腹胀', '腹泻', '吞咽困难', '呕血', '黑便', '便血', '血尿', '尿频', '尿急', '尿痛', '少尿', '无尿', '多尿', '黄疸', '皮疹',
        '关节痛', '跛行', '视物模糊', '复视', '听力下降', '耳聋', '耳鸣', '消瘦', '便秘', '皮肤黏膜出血', '下消化道出血', '上消化道出血'
      ], // 主诉症状列表
      induce: [], // 诱发因素
      induceList: ['劳力', '情绪', '寒冷', '近视', '呼吸', '姿势', '运动', '轻触', '深呼吸', '左侧卧位', '其他'],
      happen: [], // 发生部位
      happenList: ['颈后', '肩胛区', '胸骨上窝', '胸骨后', '心前区', '心尖区或左乳头下方', '肋间神经分布', '右胸胸痛',
        '剑突下', '肋骨（季肋区）', '上背', '左上腹部', '右上腹部', '腹部', '不确定弥散'
      ],
      radiation: [], // 放射部位
      radiationList: ['颈部（下颌）', '左肩', '右肩', '腋下', '背（腰）', '前臂内外侧', '下肢', '其他'],
      nature: [], // 胸痛性质
      natureList: ['刺痛', '绞痛', '酸胀痛', '闷痛', '压榨痛', '跳痛', '烧灼痛', '撕裂刀割痛'],
      seiZure: '', // 发作程度
      continued: '', // 持续时间
      frequency: '', // 频率
      accompany: [], // 伴随症状
      accompanyList: ['发热（体温升高）', '呼吸困难（气短）', '咯血', '出汗（冷汗）', '面色苍白', '低血压或休克', '吞咽困难',
        '晕厥', '乏力', '发绀', '恐惧抑郁焦虑濒死感', '呼吸频率加快', '恶心呕吐', '四肢发冷', '头晕或神志改变', '心悸'
      ],
      relieve: [], // 缓解方式
      relieveList: ['硝酸甘油', '钙拮抗剂', '止痛药', '抗生素', '休息', '侧卧', '禁食', '活动后缓解', '持续不缓解', '无特定缓解因素'],
      past: [], // 既往病史
      pastList: ['高血压', '脑梗死', '活动性肺结核支扩', '头颅外伤史', '心脏病', '脑出血', 'COPD', '冠心病', '糖尿病', '大手术史',
        '消化道或泌尿道出血', '饮酒史', '肿瘤病', '哮喘', '吸烟史', '脂肪代谢紊乱', '房颤', '周围血管病', '短暂性脑缺血发作', '既往体健', '心肌梗死', '肺动脉栓塞',
        '其他心脏病', '不详', '其他'
      ],
      family: '', // 家族史
      allergy: [], // 过敏史
      allergyList: ['链霉素', '头孢霉素族', '青霉素', '不详', '其他'],
      Antiplatelet: '', // 抗血小板药
      Anticoagulation: '', // 抗凝药
      stepDown: '', // 降压药
      Regulating: '', // 调解血脂药
      Hypoglycemic: '' // 降糖药

    }
  },
  computed: {},
  updated() { },
  created() {
    this.diseasehistory()
  },
  methods: {
    addtellSymptoms(name) {
      if (this.tellSymptom !== null && this.tellSymptom.indexOf(name) === -1) {
        this.tellSymptom = this.tellSymptom + ' ' + name
      }
    },
    // 病史接口
    diseasehistory() {
      const dispatchid = this.checkrowdata.dispatchId
      const apiToken = this.$store.getters.apiToken
      getHistory(dispatchid, apiToken).then((res) => {
        const getData = res.data.diseaseHistoriesModel
        if (getData !== null) {
          this.assess = getData.distressCase
          if (getData.distressCaseDetail) {
            this.symptoms = getData.distressCaseDetail.split(',')
          }
          this.tellSymptom = getData.chiefComplaint
          if (getData.precipitatingFactor) {
            this.induce = getData.precipitatingFactor.split(',')
          }
          if (getData.occurrenceSite) {
            this.happen = getData.occurrenceSite.split(',')
          }
          if (getData.radiationSite) {
            this.radiation = getData.radiationSite.split(',')
          }
          if (getData.nature) {
            this.nature = getData.nature.split(',')
          }
          this.seiZure = getData.attackDegree
          this.continued = getData.duration
          this.frequency = getData.painFreq
          if (getData.concomitantSymptom) {
            this.accompany = getData.concomitantSymptom.split(',')
          }
          if (getData.mitigationMethod) {
            this.relieve = getData.mitigationMethod.split(',')
          }
          if (getData.previousIllness) {
            this.past = getData.previousIllness.split(',')
          }
          this.family = getData.isFamilyHistoryOfCD
          if (getData.allergyHistory) {
            this.allergy = getData.allergyHistory.split(',')
          }
          this.Antiplatelet = getData.isHistoryOfAntiplateletDrug
          this.Anticoagulation = getData.isHistoryOfAnticoagulantDrug
          this.stepDown = getData.isHistoryOfAntihypertensiveDrug
          this.Regulating = getData.isHistoryOfLipidRegulatingDrug
          this.Hypoglycemic = getData.isHistoryOfHypoglycemiDrug
        }
      })
    },

    // 保存病史
    addHistory() {
      let tips = ""
      console.log(this.assess,this.symptoms)
      if (this.assess == '' || !this.assess || this.assess.length === 0) {
        tips = "病情评估"
      }
      if (this.symptoms == '' || !this.symptoms || this.symptoms.length === 0) {
        tips = "病情评估"
      }
      if (tips) {
        this.$message({
          message: tips+"不能为空！",
          type: 'warning'
        })
        return
      }
      const data = {
        id: null,
        apiToken: this.$store.getters.apiToken,
        dispatchId: this.checkrowdata.dispatchId,
        medicalId: this.checkrowdata.medicalId,
        userId: this.checkrowdata.userId,
        distressCase: this.assess?this.assess.toString():"",
        distressCaseDetail: this.symptoms?this.symptoms.toString():"",
        chiefComplaint: this.tellSymptom,
        precipitatingFactor: this.induce.toString(),
        occurrenceSite: this.happen.toString(),
        distributionRange: '',
        radiationSite: this.radiation.toString(),
        nature: this.nature.toString(),
        attackDegree: this.seiZure,
        duration: this.continued,
        painFreq: this.frequency,
        concomitantSymptom: this.accompany.toString(),
        mitigationMethod: this.relieve.toString(),
        allergyHistory: this.allergy.toString(),
        isFamilyHistoryOfCD: this.family,
        previousIllness: this.past.toString(),
        isHistoryOfAspirin: '',
        isHistoryOfAntiplateletDrug: this.Antiplatelet,
        isHistoryOfAnticoagulantDrug: this.Anticoagulation,
        isHistoryOfAntihypertensiveDrug: this.stepDown,
        isHistoryOfLipidRegulatingDrug: this.Regulating,
        isHistoryOfHypoglycemiDrug: this.Hypoglycemic
      }
      addHistoryPost(data).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: '保存成功',
            type: 'success'
          })
          this.diseasehistory()
        } else if (res.code === 9999) {
          this.$message.error(res.error)
        }
      }).catch((err) => {
        console.log(err)
        this.$message({
          message: '保存失败',
          type: 'error'
        })
      })
    },
    changeAccess(value) {
      if (value.target.tagName === "INPUT") {
        if (this.assess === "") {
        } else {
          this.assess = "";
        }
      }
    }
  }
}
</script>

<style scoped>
#box {
  width: 100%;
  height: 100%;
  padding: 10px 20px;
}

.outer_layer {
  background-color: #F9F9F9;
  width: 100%;
  padding: 10px;
}

.el-row {
  margin-bottom: 15px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  margin-bottom: 10px;
}

.el-checkbox-group {
  margin-left: 10px;
}

.el-radio-group {
  margin-left: 10px;
}

.botton {
  background-color: white;
  margin-right: 40px;
  margin-left: 20px;
}
</style>
